<template>
  <div class="home-container">
    <nav-bar />
    <head-bar />
    <div class="main-container" :class="$store.state.app.collapse?'menu-bar-collapse-width':'menu-bar-width'">
      <bread-crumb />
      <transition name="fade" mode="out-in">
        <router-view v-if="isRouterAlive" />
      </transition>
    </div>
  </div>
</template>

<script>
import HeadBar from './Home/HeadBar'
import NavBar from './Home/NavBar'
import BreadCrumb from '@/components/BreadCrumb'
export default {
  components: {
    HeadBar,
    NavBar,
    BreadCrumb
  },
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

<style lang="scss">
.home-container {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  background: #b4b3bb80;
}

.edit-container {
  padding: 20px;
}
.leftToolbar {
  float: left;
  padding-top: 10px;
  padding-left: 15px;
  width: calc(100% - 124px);
}
.rightToolbar {
  float: right;
  padding-top: 10px;
  padding-right: 15px;
}

.main-container {
  position: absolute;
  top: 60px;
  bottom: 0px;
  left: 200px;
  right: 0px;
  .breadcrumb {
    padding: 10px;
    border-color: rgba(38, 86, 114, 0.2);
    border-bottom-width: 1px;
    border-bottom-style: solid;
  }
}
.main-container.menu-bar-width {
  left: 204px;
}
.main-container.menu-bar-collapse-width {
  left: 65px;
}
</style>
